<template>
  <div class="container">
    <img class="banner" src="@/assets/user-banner.png" alt="" />
    <div class="list-content">
      <div class="wrap">
         <div class="upper">
          <div class="title">
            <p>WTT重庆冠军赛</p>
            <span>2025年3月11日-2025年3月26日 地点：中国·重庆</span>
          </div>
        </div>
        <div class="list">
          <div class="col" v-for="item in list" :key="item.id">
            <router-link
              :to="{
                path: '/eventDetail',
                query: {
                  id: item.id,
                },
              }"
            >
              <div class="item imgDiv">
                <img :src="item.image_url" alt="" />
                <div class="content">
                  <div class="left">
                    <p>{{ item.title_cn }}</p>
                    <!-- <div class="info">
                      <img :src="item.image" alt="" />
                      {{ item.location }}
                    </div> -->
                  </div>
                  <div class="right">
                    <!-- <span class="pointer">
                      <i class="el-icon-shopping-cart-full"></i>
                    </span> -->
                    <span class="pointer" @click.prevent="collect(item)">
                      <i class="el-icon-star-on" v-if="item.favorite == 1"></i>
                      <i class="el-icon-star-off" v-else></i>
                    </span>
                    <span class="pointer" @click.prevent="download(item)">
                      <i class="el-icon-download"></i>
                    </span>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <pagination
      v-if="total_page > 1"
      :total="total"
      :currentPage="page"
      :pageSize="rows"
      @handleCurrentChange="handleCurrentChange"
    />
    <payment ref="paymentRef" />
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      page: 1,
      rows: 9,
      total: 0,
      list: [],
      total_page:0,
      id: "",
    };
  },
  components: {
    pagination: () => import("@/components/pagination.vue"),
    payment: () => import("@/components/payment.vue"),
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getInfo();
    this.getList();
  },
  methods: {
    getInfo() {
      this.$post("/index/images_list", {
        event_id: this.id,
      }).then((res) => {
        this.list = res.data.data;
        this.total = res.data.total;
        this.total_page = res.data.last_page;
      });
    },
    getList() {
      this.$post("/index/images_list", {
        page: this.page,
        rows: this.rows,
        event_id: this.id,
      }).then((res) => {
        this.list = res.data.data;
        this.total = res.data.total;
        this.total_page = res.data.last_page;
      });
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getList();
    },
    download(item) {
      this.$refs.paymentRef.open(item.id);
    },
    collect(item) {
      let that = this;
      this.$post("/user/favorite", { image_sn: item.image_sn }).then((res) => {
        console.log(res);
        if (res.code === 1) {
          if (res.data.result === "Y") {
            item.favorite = 1;
            that.$message.success("收藏成功");
          }
          if (res.data.result === "N") {
            item.favorite = 0;
            that.$message.error("取消收藏");
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  height: 300px;
}
.title {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  p {
    font-weight: bold;
    font-size: 48px;
  }

  .more {
    position: absolute;
    right: 0%;
    bottom: 10px;
  }
}
.list-content {
  padding: 40px 0 90px;
  background-size: 100%;

  .list {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
    .col {
      width: calc(100% / 3);
      padding: 8px;
      .imgDiv {
        border-radius: 20px;
        position: relative;
        .content {
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;
          background: rgba($color: #8f79c4, $alpha: 0.7);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 17px;
          transform: translateY(100%);
          transition: all 0.3s;
          p {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
          }
          .info {
            font-size: 14px;
            display: flex;
            img {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              display: block;
              margin-right: 10px;
            }
          }
          .right {
            display: flex;
            span {
              display: flex;
              align-items: center;
              justify-content: center;
              background: #441054;
              border-radius: 3px;
              width: 28px;
              height: 28px;
              margin-left: 10px;
            }
          }
        }
        &:hover .content {
          transform: translateY(0);
        }
      }
    }
  }
}
//
.Schedule {
  padding: 50px 0;
}
// 赛事交流
.exchange {
  .list {
    .col {
      padding: 50px 0;
      border-top: 2px dotted #999;
      &:first-child {
        border-top: none;
      }
      .upper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
        }
        .right {
          color: #fff;
          background: #917bbd;
          padding: 6px 30px;
          font-size: 18px;
          border-radius: 10px;
        }
        .avatar {
          width: 134px;
          height: 135px;
          border-radius: 50%;
          overflow: hidden;
        }
        .name {
          padding-left: 34px;
          p {
            font-size: 30px;
          }
          span {
            color: #999;
          }
        }
      }
      .content {
        color: #999;
        font-size: 20px;
        margin: 30px 0;
      }
      .imgList {
        display: flex;
        margin: -8px;
        .item {
          width: calc(100% / 3);
          padding: 8px;
          .imgDiv {
            border-radius: 10px;
            height: 290px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1024px) {
  .title p {
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  .title {
    font-size: 24px;
  }
  .list-content {
    padding: 40px 0 10px;
  }
  .list-content .list .col {
    width: 50%;
  }
  .list-content .list .col .imgDiv:hover .content {
    display: none;
  }
}
</style>
